import * as $util from '/lib/hc-util.js'

const hc$flow$rulepanel = {
    template: `
            <div>
                <!-- default-expand-all -->
                <el-tree style="background-color: inherit;" :data="treedata" node-key="rpath" accordion @node-click="handleNodeClick" :props="{children:'list'}">
                    <span slot-scope="{node, data }">
                        <span v-if="data.nodetype=='switch' || data.nodetype=='task'" draggable='true' :nodetype="data.nodetype"
                            :ruletype="data.rtype" :ruleid='data.rpath' ondragstart='handleDragStart(event)'
                            class="flow-rulepanel-node">
                            {{ data.rname }}</span>

                        <span v-else-if="data.nodetype=='category'" :nodetype="data.nodetype" class='flow-rulepanel-node'>
                            {{ data.rname }}</span>
                        <span v-else>{{data}}</span>
                    </span>

                </el-tree>
            </div>               
                
                `,
    data: function() {
        return {
            treedata: $util.ruleTree(),
        }
    },
    methods: {
        handleNodeClick: function() {}
    },

};

Vue.component('hc-flow-rulepanel', hc$flow$rulepanel)
